<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>vue 样式 属性 监听器</title>
    <script src="./vue.js"></script>
    <style>
        .activated{
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        {{msg}}
        <div v-text="msg"></div>
        <div v-html="msg" v-bind:title="msg"></div>
        <div v-text="com"></div>
        <div @click="divClick" :class="{activated:isActivated}">
            玲珑望秋月
        </div>
        <div :style="styleObj" @click="styleClick">
            Style玉阶生白露
        </div>
    </div>
    <script>
        
        var vm = new Vue({
            el: '#app',
            data: {
                msg:'hello',
                message: 'word',
                isActivated: false,
                styleObj: {
                    color: "green"
                }
            },
            //方法
            methods:{
                divClick: function() {
                    this.isActivated = !this.isActivated;
                },
                styleClick: function() {
                    console.log(this.styleObj.color);
                    this.styleObj.color = this.styleObj.color === "green" ? "red" : "green";
                }
            },
            //组件
            components: {
                
            },
            //计算属性
            computed:{
               /* com: function(){
                    return this.msg + " " + this.message;
                }*/
                com: {
                    get: function(){
                         return this.msg + " " + this.message;
                    },
                    set: function(value){
                        var arr = value.split(" ").reverse();
                        this.msg = arr[0];
                        this.message = arr[1];
                    }
                }
            }


        })
    </script>
</body>
</html>